<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 顶部 -->
      <div class="ding">
        <p>
          姓名:<el-input v-model="queryInfo.input" placeholder="请输入内容" clearable @input="search" @clear="search" />
          公司名称:<el-input v-model="input" placeholder="请输入内容" clearable @input="search" @clear="search" />
        </p>
        <p>
          <el-button type="primary" @click="hui">返回</el-button>
        </p>
      </div>
      <!-- 表格数据 -->
      <el-table
        :data="TableList"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
        />
        <el-table-column
          label="姓名"
          prop="name"
        />
        <el-table-column
          label="公司名称"
          prop="company"
        />
        <el-table-column
          label="公司地址"
          prop="city"
        />
        <el-table-column
          label="面试方式"
          prop="way"
        />
        <el-table-column
          label="面试时间"
        >
          <template slot-scope="scope">
            {{ scope.row.time|moment("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column label="审核状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status==1">审核通过</span>
            <span v-if="scope.row.status==0">未审核</span>
            <div v-if="scope.row.status==2">
              <span>审核未通过</span>
              <p class="red">{{ scope.row.reason }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button @click="upd(scope.row)"><a class="blue">编辑</a></el-button> -->
            <el-button @click="del(scope.row.id)"><a class="red">删除</a></el-button>
            <!-- <el-button v-else disabled @click="del(scope.row)"><a class="qred">删除</a></el-button>          -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryInfo.t"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
export default {
  name: '',
  components: {

  },
  props: {

  },
  data() {
    return {
      queryInfo: {
        size: 5,
        page: 1,
        t: 0,
        input: ''
      },
      input: '',
      TableList: []
    }
  },
  computed: {

  },
  watch: {

  },
  created() {
    this.search()
  },
  mounted() {

  },
  methods: {
    hui() {
      this.$router.go(-1)
    },
    async search() {
      var res = await this.http.get('/replay/replay', { params: { company: this.input,
        name: this.queryInfo.input, status: 2 }})
      console.log(res)
      if (res.status !== 200) return this.$message.error('获取列表失败')
      this.queryInfo.t = res.data.count
      this.TableList = res.data.data
      console.log(this.TableList)
    },
    handleSizeChange(v) {
      this.queryInfo.size = v
      this.search()
    },
    handleCurrentChange(v) {
      this.queryInfo.page = v
      this.search()
    },
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        var res = await this.http.delete(`/replay/replay/${id}`)
        if (res.data.code == 200) {
          this.getcate()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
          this.$message({
            type: 'error',
            message: '没有权限!'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
.el-input{
      width: 200px;
      margin-left: 5px;
    }
.el-pagination{
    margin-top: 20px;
    text-align: center;
}
.el-table .el-button{
    background: 0;
    padding-left: 0;
    padding-right: 0;
    display: inline-block;
    border:0;
}
.blue{
    color: #3175fb;
}
.red{
    color: red;
}
.ding{
    display: flex;
    justify-content: space-between;
}
.ding .el-button{
    float: right;
}
</style>
